<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://51star.com/mytag/tag" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>main</title>
<script type="text/javascript" src="static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/easyui/themes/metro-admin/easyui.css">
<style type="text/css">
.information{
	width:236px;
	height:120px;
	position:absolute;
	bottom:0px;
	background: #233646;
	border-top:1px solid white;
}
.message-top{
	width:100%;
	height:60px;
}
.message-icon{
	width:50px;
	height:50px;
	background-repeat: no-repeat;
    background-size: 50px;
    display:block;
    margin-left:20px;
    float:left;
    border-radius: 50%;
    border: 3px solid #e4e4e4;
    margin-top:10px;
}
.title-emp{
	cursor: pointer;
    margin: 16px 0 0 20px;
    width: 38px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    float: left;
    background-color: rgba(26,179,148,1);
    border-radius: 3px;
}
.title-message{
	float: right;
    width: 200px;
    height: 30px;
    margin: 22px 0 0 16px;
    font-size: 14px;
}
.title-left{
	color: rgba(26,179,148,1);
    font-weight: 700;
}
.title-right{
	color: #ccc;
}
.fun{
	height:30px;
	display:block;
	font-size:15px;
	width:236px;
	text-align:center;
	line-height:30px;
	cursor:pointer;
}
/* .fun{
	height:40px;
	display:block;
	font-size:15px;
	width:238px;
	text-align:center;
	background:#233646;
	color:#A5AD98;
	line-height:40px;
	cursor:pointer;
}
.fun:hover{
	background:#1E2E3C;
} */
.main-daka>span>span{
	font-size:15px;
}
.color_mu{
background:#1E2E3C;
}

</style>
</head>

<body>

<div class="easyui-layout" data-options="fit:true">
	
	<div region="west" title="功能导航" style="width:240px;overflow:hidden;background:#233646;">
	<div id="aa" class="easyui-accordion" style="width:240px;height:400px;">
      <c:forEach items="${fun1}" var="f1">
				    <!-- 当jsp页面编译到自定义标签时，会运行自定义标签类的doTage方法，
				    	标签中的属性得到的值会直接赋值到类中属性 -->
				    <f:fun funId="${f1.function_id}">
					    <div title="${f1.function_name}" data-options="iconCls:'${f1.function_icon}'" style="overflow:auto">
							<c:forEach items="${f1.funs}" var="f2">
								<f:fun funId="${f2.function_id}">
									<a class="fun easyui-linkbutton" data-id="${f2.function_id}" data-href="${f2.function_url}" data-options="width:240,border:false">${f2.function_name}</a>
					    		</f:fun>
					    	</c:forEach>
					    </div>
				    </f:fun>
			    </c:forEach>
</div>
	<!-- 个人信息栏 -->
	<div class="information">
		<div class="message-top">
		<img class="message-icon">
		<div style="float:right;width:120px;">
			<input  type="hidden" id="yuangong_id" value="1">
			<p style="font-size:14px;color:white;">帅峰</p>
			<span style="display:block;color:white;">15292232190</span>
		</div>
		</div>
		<p style="margin:20px 20px;font-size:15px;color:white;">Decade公司</p>
	</div>
	</div>
	<div region="center"  style="overflow:hidden">
		<div style="height:60px;border:solid 1px red;" data-options="fit:true">
			<div style="width:130px;height:100%;font-size:20px;text-align:center;line-height:60px;color:black;float:left">Decade公司</div>
			<div style="height:100%;width:290px;border:solid 1px;float:left">
				<div class="title-emp icon-title-emp"></div>
				<div class="title-message">
					<span class="title-left">员工自助</span>
					<span class="title-right">个人中心</span>
					<span class="title-right"></span> 
				</div>
			</div>
			<div style="height:100%;width:260px;border:solid 1px;float:right">
				<a class="easyui-linkbutton main-daka" id="daka" style="width:90px;height:30px;background:#19AA8D;color:white;font-size:15px;">打卡</a>
				<script type="text/javascript">
					$(function(){
						$("#daka").click(function(){
							
							var id=$("#yuangong_id").val();
							$.ajax({
								url: "kq_daka", 
								type : "post",
								data: "dakaid="+id,
								success: function(msg){
							    	alert(msg)
								}
							});
						});
					});
				</script>
			</div>
		</div>
		<div id="content" class="easyui-tabs" data-options="fit:true">
			<div title="个人中心" href="people"></div>
			
		</div>
		
	</div>
	 
</div>
</body>
<script type="text/javascript">
		$(function(){
			$(".fun").click(function(){
				//获取按钮的文本
				var t = $(this).text();
				var h = $(this).attr("data-href");
				//根据标签页的title内容来判断该标签是否存在
				if($("#content").tabs('getTab',t)){
					//设置为打开
					$("#content").tabs('select',t);
				}else{
					$("#content").tabs("add",{
						href:h,
						title:t,
						selected:true,
						closable:true
					});
				}
			})
		});
			
			
			
			
</script>
</html>